<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        wechat: '#07C160'
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background: #F5F7FA;
        }
        .btn-wechat {
            background: linear-gradient(to right, #07C160, #06AD56);
        }
    </style>
</head>
<body>
    <div class="w-[375px] mx-auto min-h-screen bg-white px-6 flex flex-col">
        <!-- 主内容区域 -->
        <div class="flex-1 flex flex-col justify-center -mt-16">
            <!-- Logo和介绍 -->
            <div class="text-center mb-16">
                <img src="logo.png" alt="Logo" class="w-24 h-24 mx-auto mb-4">
                <h1 class="text-2xl font-medium text-gray-800 mb-2">趣味汉字</h1>
                <p class="text-gray-500 text-sm">快乐学习汉字的好帮手</p>
            </div>

            <!-- 登录按钮区域 -->
            <div class="space-y-4">
                <!-- 微信登录按钮 -->
                <button class="w-full h-[48px] btn-wechat text-white rounded-xl flex items-center justify-center hover:opacity-90 transition-opacity">
                    <i class="fab fa-weixin text-xl mr-2"></i>
                    微信一键登录
                </button>

                <!-- 跳过按钮 -->
                <div class="flex justify-center mt-4">
                    <button class="text-gray-400 text-sm flex items-center hover:opacity-80 transition-opacity">
                        跳过
                        <i class="fas fa-chevron-right ml-1 text-xs"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- 底部协议 -->
        <div class="pb-8">
            <p class="text-center text-xs text-gray-400">
                登录即表示同意
                <a href="#" class="text-gray-500">用户协议</a>
                和
                <a href="#" class="text-gray-500">隐私政策</a>
            </p>
        </div>
    </div>
</body>
</html>